<template>
  <el-card>
    <div class="middle">
    <el-table :data="myShelve"  :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">
      <el-table-column prop="bookId" label="书籍编号"></el-table-column>
      <el-table-column prop="bookName" label="书籍名称" width="200px"></el-table-column>
      <el-table-column prop="author" label="作者" width="200px"></el-table-column>
      <el-table-column prop="ISBN" label="ISBN"></el-table-column>
      <el-table-column prop="quantity" label="数量"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="{row}">
          <el-button @click="deleteShelve(row.bookId)">下架</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom" >
      <el-pagination background layout="prev, pager, next" :total="1000" :page-count="pageNumber" class="pagination" @current-change="handlePageChange"/>
    </div>
    <div class="goShelve">
      <el-button @click="goShelve" type="primary">去上架</el-button>
    </div>
  </div>
  </el-card>
</template>

<script>
import axios, { AxiosError } from 'axios'

export default {
    name: 'MyShelve',
    data(){
      return{
        myShelve:'',
        username : localStorage.getItem('username'),
        token : localStorage.getItem('token'),
        pageNumber:''
      }
    },
    methods:{
      checkBook(row){
        console.log('check'+row)
        this.$router.push({name:  'BookInfo' , query:{bookId:row.ISBN}})
      },
      goShelve(){
        this.$router.push({name:  'GoShelve'})
      },
      //使用结构赋值进行异常处理
			promise_error_process(promise){
				return promise.then(data=>[null,data])
								.catch(err=>[err,null])
			},
      async getShelveByAjax(page){
          const response = await axios({
            url				: `http://127.0.0.1:8080/api/books/userBookList/${this.username}/${page}`,
            method			: 'GET',
            withCredentials : true
          })
          return response
      },
      async getShelve(page){
        const [err,result] = await this.promise_error_process(this.getShelveByAjax(page))
        if(err){
          console.log('请求异常')
        }
        else{
          console.log(result.data.data.books)
          this.myShelve = result.data.data.books
        }
      },
      async getPageNumberByAjax(){
        const response = await axios({
            url				: `http://127.0.0.1:8080/api/books/pageNumber/${this.username}/${3}`,
            method			: 'GET',
            withCredentials : true
          })
          return response
      },
      async getPageNumber(){
        const [err,result] = await this.promise_error_process(this.getPageNumberByAjax())
        if(err)
          console.log('请求异常')
        else{
          console.log(result.data.data)
          this.pageNumber = result.data.data
        }
      },
      async deleteShelveByAjax(bookId){
        const response = await axios({
            url				: `http://127.0.0.1:8080/api/books/deleteBook/${bookId}`,
            method			: 'DELETE',
            withCredentials : true
          })
          return response
      }
      ,
      async deleteShelve(bookId){
        const [err,result] = await this.promise_error_process(this.deleteShelveByAjax(bookId))
        if(err){
          console.log('请求异常')
        }else{
          console.log(result)
          ElMessageBox.confirm('确定要下架本图书吗？', '提示', {
            // if you want to disable its autofocus
            // autofocus: false,
            confirmButtonText: '确认下架',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(()=>{
            this.myShelve = this.myShelve.filter(item => item.bookId !== bookId);
          })
          
        }
      },
      handlePageChange(page) {
        // 在这里处理页码改变的逻辑
        this.getShelve(page)
        console.log('当前页码:', page);
        // 可以在这里调用后端接口获取对应页码的数据
      }
    },
    created(){
        this.getPageNumber();
        this.getShelve(1);
    }
}
</script>

<style>
.goShelve{
  text-align: center;
  margin-top: 10px;
}
.bottom{
    display: flex;
    justify-content: space-between;
  }
  .el-pagination{
  justify-content: right;
  margin-right: 55px;
  margin-top: 5px;
  flex: 1;
}
</style>